<template>
  <div>
    <!-- 左侧目录开始 -->

    <div>
      <div
        class="panel-group col-md-2"
        id="accordion"
        role="tablist"
        aria-multiselectable="true"
        cell-style="{background:'#eef1f6',color:'#606266'}"
      >
        <div class="panel panel-default">
          <div
            class="panel-heading"
            role="tab"
            id="headingOne"
            style="padding: 0px;background-color: #d3d3d3"
          >
            <button
              class="btn btn-dark dropdown-toggle"
              type="button"
              role="button"
              data-toggle="collapse"
              data-parent="#accordion"
              href="#collapseOne"
              aria-expanded="true"
              aria-controls="collapseOne"
              style="width: 100%"
            >
              个人信息 <span class="caret"></span>
            </button>
          </div>
          <div
            id="collapseOne"
            class="panel-collapse collapse in"
            role="tabpanel"
            aria-labelledby="headingOne"
          >
            <div class="panel-body" style="padding: 0px">
              <a
                href="#"
                class="btn btn-default"
                role="button "
                style="width: 100%"
                >{{ list[id - 1].uname }}</a
              >
              <a
                href="#"
                class="btn btn-default"
                role="button "
                style="width: 100%"
                >{{ list[id - 1].gender }}</a
              >
              <a
                href="#"
                class="btn btn-default"
                role="button "
                style="width: 100%"
                >{{ list[id - 1].phone }}</a
              >
              <a
                href="#"
                class="btn btn-default"
                role="button "
                style="width: 100%"
                >{{ list[id - 1].age }}岁</a
              >
              <a
                href="#"
                data-toggle="modal"
                data-target="#bs-example-modal1"
                class="btn btn-default"
                role="button "
                style="width: 100%"
                >修改信息</a
              >
            </div>
          </div>
        </div>

        <div class="panel panel-default">
          <div
            class="panel-heading"
            role="tab"
            id="headingTwo"
            style="padding: 0px"
          >
            <button
              class="btn btn-dark dropdown-toggle collapsed"
              type="button"
              role="button"
              data-toggle="collapse"
              data-parent="#accordion"
              href="#collapseTwo"
              aria-expanded="false"
              aria-controls="collapseTwo"
              style="width: 100%"
            >
              账号与安全<span class="caret"></span>
            </button>
          </div>
          <div
            id="collapseTwo"
            class="panel-collapse collapse"
            role="tabpanel"
            aria-labelledby="headingTwo"
          >
            <div class="panel-body" style="padding: 0px">
              <a
                href="#"
                class="btn btn-default"
                role="button "
                style="width: 100%"
                >{{ list[id - 1].username }}</a
              >
              <a
                href="#"
                data-toggle="modal"
                data-target="#bs-example-modal2"
                class="btn btn-default"
                role="button "
                style="width: 100%"
                >修改密码</a
              >
            </div>
          </div>
        </div>
        <div class="panel panel-default">
          <div
            class="panel-heading"
            role="tab"
            id="headingThree"
            style="padding: 0px"
          >
            <button
              class="btn btn-dark dropdown-toggle collapsed"
              type="button"
              role="button"
              data-toggle="collapse"
              data-parent="#accordion"
              href="#collapseThree"
              aria-expanded="false"
              aria-controls="#collapseThree"
              style="width: 100%"
            >
              我的银行卡 <span class="caret"></span>
            </button>
          </div>
          <div
            id="collapseThree"
            class="panel-collapse collapse"
            role="tabpanel"
            aria-labelledby="headingThree"
          >
            <div class="panel-body" style="padding: 0px">
              <a
                href="#"
                class="btn btn-default"
                role="button "
                style="width: 100%"
                >银行卡1</a
              >
              <a
                href="#"
                class="btn btn-default"
                role="button "
                style="width: 100%"
                >银行卡2</a
              >
              <a
                href="#"
                class="btn btn-default"
                role="button "
                style="width: 100%"
                data-toggle="modal"
                data-target="#bs-example-modal3"
                >+添加银行卡</a
              >
            </div>
            
          </div>



          <div style="float:left">
      <template>
       <el-button type="success" @click="dialogFormVisible = true" style="width:224px">宿递~立即下单！</el-button>

<el-dialog title="订单信息" :visible.sync="dialogFormVisible"
  style="width:400px">
  <el-form :model="form">
    <el-form-item label="订单类型" :label-width="formLabelWidth">
      <el-select  v-model="form.type" placeholder="请选择类型"
      style="width:150px,margin-left:100px"
      >
        <el-option   value="宿递来啦"><p @click="jiage1">宿递来啦</p></el-option>
        <el-option   value="疾如猛火"><p @click="jiage2">疾如猛火</p></el-option>
        </el-select>
          &nbsp;&nbsp;订单金额:&nbsp;
        <el-input
          placeholder="金额"
          :disabled="true"
          style="width:50px"
          v-model="input">
          
        </el-input>
    </el-form-item>

    <el-form-item label="收货区域" :label-width="formLabelWidth">
      <el-cascader
                 
                  size="large"
                  :options="options"
                  v-model="selectedOptions"
                  @change="handleChange">
            </el-cascader>
    </el-form-item>
    <el-form-item label="详细地址" :label-width="formLabelWidth">
      <el-input v-model="form.value1" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="收货时间" :label-width="formLabelWidth">
     <el-date-picker
      v-model="form.value2"
      :picker-options="pickerOptions0"
      type="date"
      placeholder="期望收货日期"
      format="yyyy 年 MM 月 dd 日"
      value-format="yyyy-MM-dd">
    </el-date-picker>
    
</el-form-item>
<el-form-item label="货物信息" :label-width="formLabelWidth">
      <el-input v-model="form.value4" autocomplete="off"></el-input>
      
      <el-select  v-model="form.type1" placeholder="请选择货物类型"
      style="width:150px,margin-left:100px"
      >
        <el-option   value="普通食品"><p>普通食品</p></el-option>
        <el-option   value="生鲜"><p>生鲜</p></el-option>
        <el-option   value="衣物"><p>衣物</p></el-option>
        <el-option   value="易碎物品"><p>易碎物品</p></el-option>
        <el-option   value="冷冻物品"><p>冷冻物品</p></el-option>
        <el-option   value="文件"><p>文件</p></el-option>
        <el-option   value="其他"><p>其他</p></el-option>
        </el-select>
        <el-select  v-model="form.type2"
         placeholder="预估货物质量"
      style="width:150px,margin-left:100px"
      >
        <el-option table="<0.5kg"  value="<0.5kg"></el-option>
        <el-option table="0.5kg~1.0kg"  value="0.5kg~1.0kg"></el-option>
        <el-option table="1.0kg~1.5kg"  value="1.0kg~1.5kg"></el-option>
        <el-option table="1.5kg~2.0kg"  value="1.5kg~2.0kg"></el-option>
        <el-option table="2.0kg~3.0kg"  value="2.0kg~3.0kg"></el-option>
        <el-option table="3.0kg~4.0kg"  value="3.0kg~4.0kg"></el-option>
        <el-option table="4.0kg~5.0kg"  value="4.0kg~5.0kg"></el-option>
        <el-option table="5.0kg~8.0kg"  value="5.0kg~8.0kg"></el-option>
        <el-option table=">8.0kg"  value=">8.0kg"></el-option>
        </el-select>
          
          
        
    
    </el-form-item>
    <el-form-item label="联系电话" :label-width="formLabelWidth">
      <el-input v-model="form.value5" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="备注" :label-width="formLabelWidth">
      <el-input v-model="form.value3" autocomplete="off"></el-input>
    </el-form-item>
  </el-form>
  <div slot="footer" class="dialog-footer">
    <el-button @click="dialogFormVisible = false">取 消</el-button>
    <el-button type="success" @click="xiadan">确 定</el-button>
  </div>
</el-dialog>
      </template>
          </div>


        </div>
      </div>

      <!-- 添加模态框1-->
      <div
        class="modal fade"
        id="bs-example-modal1"
        tabindex="-1"
        role="dialog"
      >
        <div class="modal-dialog" role="document">
          <div class="modal-content">
            <div class="modal-header">
              <button
                type="button"
                class="close"
                data-dismiss="modal"
                aria-label="Close"
              >
                <span aria-hidden="true">&times;</span>
              </button>
              <h4 class="modal-title">修改信息</h4>
            </div>
            <div class="modal-body">
              <form>
                <div class="form-group">
                  <label>昵称</label>
                  <input
                    type="text"
                    class="form-control"
                    name="nickname"
                    placeholder="请输入昵称"
                    onblur="valid(this.name)"
                  />
                  <span style="color: pink"></span>
                </div>
                <div class="form-group">
                  <label>姓名</label>
                  <input
                    type="text"
                    class="form-control"
                    name="name"
                    placeholder="请输入姓名"
                    onblur="valid(this.name)"
                  />
                  <span style="color: pink"></span>
                </div>

                <div class="form-group">
                  <label>联系方式</label>
                  <input
                    type="text"
                    class="form-control"
                    name="telphone"
                    placeholder="请输入电话号码"
                  />
                  <span style="color: pink"></span>
                </div>

                <div class="form-group">
                  <label>性别</label>
                  <div class="form-inline">
                    <select name="status" class="form-control">
                      <option value="1">男</option>
                      <option value="0">女</option>
                    </select>
                  </div>
                </div>
                <!--   <button type="submit" class="btn btn-default">Submit</button> -->
              </form>
            </div>
            <div class="modal-footer">
              <button
                type="button"
                class="btn btn-default"
                data-dismiss="modal"
              >
                取消
              </button>
              <button
                type="button"
                class="btn btn-primary"
                id="addBtn"
                name="form_all"
              >
                提交
              </button>
            </div>
          </div>
          <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
      </div>
      <!-- /.modal -->

      <!-- 添加模态框2-->
      <div
        class="modal fade"
        id="bs-example-modal2"
        tabindex="-1"
        role="dialog"
      >
        <div class="modal-dialog" role="document">
          <div class="modal-content">
            <div class="modal-header">
              <button
                type="button"
                class="close"
                data-dismiss="modal"
                aria-label="Close"
              >
                <span aria-hidden="true">&times;</span>
              </button>
              <h4 class="modal-title">修改密码</h4>
            </div>
            <div class="modal-body">
              <form>
                <div class="form-group">
                  <label>旧密码</label>
                  <input
                    type="password"
                    class="form-control"
                    name="nickname"
                    placeholder="请输入旧密码"
                    onblur="valid(this.name)"
                  />
                  <span style="color: pink"></span>
                </div>
                <div class="form-group">
                  <label>新密码</label>
                  <input
                    type="password"
                    class="form-control"
                    name="name"
                    placeholder="请输入新密码"
                    onblur="valid(this.name)"
                  />
                  <span style="color: pink"></span>
                </div>

                <div class="form-group">
                  <label>请再次输入</label>
                  <input
                    type="password"
                    class="form-control"
                    name="telphone"
                    placeholder="请再次输入新密码"
                  />
                  <span style="color: pink"></span>
                </div>

                <!--   <button type="submit" class="btn btn-default">Submit</button> -->
              </form>
            </div>
            <div class="modal-footer">
              <button
                type="button"
                class="btn btn-default"
                data-dismiss="modal"
              >
                取消
              </button>
              <button
                type="button"
                class="btn btn-primary"
                id="addBtn"
                name="form_all"
              >
                提交
              </button>
            </div>
          </div>
          <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
      </div>
      <!-- /.modal -->

      <!-- 添加模态框3-->
      <div
        class="modal fade"
        id="bs-example-modal3"
        tabindex="-1"
        role="dialog"
      >
        <div class="modal-dialog" role="document">
          <div class="modal-content">
            <div class="modal-header">
              <button
                type="button"
                class="close"
                data-dismiss="modal"
                aria-label="Close"
              >
                <span aria-hidden="true">&times;</span>
              </button>
              <h4 class="modal-title">添加银行卡</h4>
            </div>
            <div class="modal-body">
              <form>
                <div class="form-group">
                  <label>身份证号</label>
                  <input
                    type="text"
                    class="form-control"
                    name="nickname"
                    placeholder="请输入昵称"
                    onblur="valid(this.name)"
                  />
                  <span style="color: pink"></span>
                </div>
                <div class="form-group">
                  <label>姓名</label>
                  <input
                    type="text"
                    class="form-control"
                    name="name"
                    placeholder="请输入姓名"
                    onblur="valid(this.name)"
                  />
                  <span style="color: pink"></span>
                </div>

                <div class="form-group">
                  <label>密码</label>
                  <input
                    type="text"
                    class="form-control"
                    name="telphone"
                    placeholder="请输入电话号码"
                  />
                  <span style="color: pink"></span>
                </div>

                <!--   <button type="submit" class="btn btn-default">Submit</button> -->
              </form>
            </div>
            <div class="modal-footer">
              <button
                type="button"
                class="btn btn-default"
                data-dismiss="modal"
              >
                取消
              </button>
              <button
                type="button"
                class="btn btn-primary"
                id="addBtn"
                name="form_all"
              >
                提交
              </button>
            </div>
          </div>
          <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
      </div>
      <!-- /.modal -->

      <!-- 添加模态框4-->
      <div
        class="modal fade"
        id="bs-example-modal4"
        tabindex="-1"
        role="dialog"
      >
        <div class="modal-dialog" role="document">
          <div class="modal-content">
            <div class="modal-header">
              <button
                type="button"
                class="close"
                data-dismiss="modal"
                aria-label="Close"
              >
                <span aria-hidden="true">&times;</span>
              </button>
              <h4 class="modal-title">充值</h4>
            </div>
            <div class="modal-body">
              <form>
               

               <div class="form-group">
                  <label>请选择金额</label>
                  <div class="form-inline">
                    <select name="status" class="form-control">
                      <option value="1">10元</option>
                      <option value="2">20元</option>
                       <option value="5">50元</option>
                        <option value="10">100元</option>
                    </select>
                  </div>
                </div>

         

                   <div class="form-group">
                  <label>请选择银行卡</label>
                  <div class="form-inline">
                    <select name="status" class="form-control">
                      <option value="1">银行卡1</option>
                      <option value="0">银行卡2</option>
                    </select>
                  </div>
                </div>

                <!--   <button type="submit" class="btn btn-default">Submit</button> -->
              </form>
            </div>
            <div class="modal-footer">
              <button
                type="button"
                class="btn btn-default"
                data-dismiss="modal"
              >
                取消
              </button>
              <button
                type="button"
                class="btn btn-primary"
                id="addBtn"
                name="form_all"
              >
                提交
              </button>
            </div>
          </div>
          <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
      </div>
      <!-- /.modal -->
    


      <div class="col-md-10"
        style="width: 1200px">
        <div class="panel panel-default">
          <div class="panel-heading">
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            早上好！<span style="color: blue">{{ list[id - 1].uname }}</span>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

            <a class="btn btn-default" href="http://localhost:8081/#/login" role="button"> 退出登录 </a>
          </div>
          <div class="panel-body">
            余额：{{ list[id - 1].money }}元

            <a href="#" data-toggle="modal" data-target="#bs-example-modal4"
              >充值</a
            >
          </div>
        </div>
      </div>




      <templaet >
  <el-table
    :data="tabledata.filter(data => !search || data.area1.toLowerCase().includes(search.toLowerCase())||data.area2.toLowerCase().includes(search.toLowerCase()) || data.area3.toLowerCase().includes(search.toLowerCase()) || data.value1.toLowerCase().includes(search.toLowerCase()) || data.type.toLowerCase().includes(search.toLowerCase()) )"
    style="width: 400px;"
    border=""
    height="600px"
    :header-cell-style="{background:'#eeeeee',color:'#606266'}"
    :row-style="{background:'#eef1f6'}"
  >
    
    <el-table-column
      label="订单类型"
      prop="type"
      fixed
      width="50px"
    >
      </el-table-column>
    <el-table-column
      label="收货日期"
      prop="date"
      
      width="100px"
    >
      </el-table-column>
      <el-table-column
        label="省"
        prop="area1"
        width="70px"
      >
        </el-table-column>
        <el-table-column
        label="市"
        prop="area2"
        width="70px"
      >
        </el-table-column>
        <el-table-column
        label="区"
        prop="area3"
        width="70px"
      >
        </el-table-column>
        <el-table-column
        label="金额"
        prop="money"
        
        width="60px"
      >
        </el-table-column>
        <el-table-column
        label="货物类型"
        prop="type1"
        width="100px"
      >
        </el-table-column>
         <el-table-column
        label="预估重量"
        prop="type2"
        width="100px"
      >
        </el-table-column>
        <el-table-column 
        align="right"
        width="70px"
        fixed="right"
        >
          <template
            slot="header"
            slot-scope="scope"
          >
            <el-input
              v-model="search"
              size="mini"
              
              placeholder="输入关键字搜索"
            />
</template>
  <template slot-scope="scope">
    
    
  
  </el-popover>
    <a href="http://localhost:8081/#/order"><el-button
      size="mini"
      type="success"
      style="width:55px"
      @click="handleDelete(scope.$index, scope.row)"
    >接单</el-button></a>
  </template>
  
  </el-table-column>
  </el-table>
  
  </template>
    </div>

    </div>
    
  </div>
    
</template>



<script>
export default {
  data() {
    return {
      pickerOptions0: {
    disabledDate(time) {
      return time.getTime() < Date.now()- 8.64e7;
    }
  },
      uid: 1,
      id: 1,
      list: [],
      tabledata: [],
      input: 0,
      search: "",
      
      dialogFormVisible: false,
      selectedOptions: [],
      options: regionDataPlus,
      address: '',
      
        form: {
          provinces:"",
          city:"",
          area:"",
          type: '',
          type1: '',
          value1: '',
          value2: '',
          value3: '',
          value4: '',
          value5: '',
          date1: '',
          date2: '',
          delivery: false,
          type: [],
          resource: '',
          desc: '',
          
        },
        formLabelWidth: '120px',
        pickerOptions: {
          disabledDate(time) {
            return time.getTime() > Date.now();
        
        }
        },
        
    }
  },
  created() {
    this.query();
    this.gettabledata()
    
  },
  
      

  methods: {
    handleEdit(index, row) {
      console.log(index, row);
    },
    handleChange() {
     
      this.form.provinces= CodeToText[this.selectedOptions[0]]
      this.form.city= CodeToText[this.selectedOptions[1]]
      this.form.area= CodeToText[this.selectedOptions[2]]
      
    }, 
    //下单方法
    handleDelete(index, row) {
      // console.log(index, row);
      console.log(row.type);
      this.axios({
        method: "post",
        url: 'http://localhost:3000/received',
        data: {
          type: row.type,
          type1: row.type1,
          type2: row.type2,
          area1: row.area1,
          area2: row.area2,
          area3: row.area3,
          date: row.date,
          money:row.money,
          value1:row.value1,
          id:row.id
        }
      }).then(res => {
         this.axios
        .delete("http://localhost:3000/dingdan/" + row.id)
        .then((response) => {
          
        });
        this.query();
      });
    },
    
    jiage1(){
        this.$data.input=10
      },
    jiage2(){
        this.$data.input=20
      },
    
 edit(item){//省市回显      
     this.selectedOptions.push(TextToCode[this.form.provinces].code,TextToCode[this.form.provinces][this.form.city].code)
  }, 
    query() {
      this.axios.get("http://localhost:3000/users").then((response) => {
        this.list = response.data;
      });
    },
    gettabledata() {
      this.axios.get("http://localhost:3000/dingdan").then((a) => {
        this.tabledata = a.data;
        console.log(a)
      });
    },
    
    xiadan(){
      let add = this.form
      this.axios({
        method: "post",
        url: 'http://localhost:3000/dingdan',
        data: {
          type: this.form.type,
          type1: this.form.type1,
          type2: this.form.type2,
          area1: this.form.provinces,
          area2: this.form.city,
          area3: this.form.area,
          date: this.form.value2,
          money: this.input,
          value1: this.form.value1,
        }
      }).then(res => {
     console.log(res.data)
          alert("下单成功")
          this.gettabledata()
      })
    }
  },
};
import { 
  provinceAndCityData, 
  regionData, 
  provinceAndCityDataPlus, 
  regionDataPlus, 
  CodeToText, 
  TextToCode 
  } from 'element-china-area-data'

</script>

<style>

span.el-dialog__title {
    float: left;
}
</style>
